<template>
  <div id="app">
    <app-header></app-header>
    <transition name="fade">
      <router-view class="view"></router-view>
    </transition>
    <app-bottom></app-bottom>
  </div>
</template>

<script>
import appHeader from '@/components/appHeader'
import appBottom from '@/components/appBottom'

export default {
  name: 'app',
  components: { appHeader, appBottom },
  meta: { requiresAuth: true },
  data: function () {
    return { titeSpring: "业绩统计" }
  }
}

</script>

<style>
#app {
  font-family: 'Microsoft YaHei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333a4b;
  width: 100%;
  flex-direction: column;
}

.view {
  position: relative;
  padding-top: 1.17rem;
  padding-bottom: 1rem
}

.line {
  display: inline-block;
  width: 1px;
  height: 1rem;
  background: #eee;
  content: "&160#"
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3
}

footer {
  position: fixed;
  bottom: 0;
  left: 0
}
</style>
